<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box{width: 200px;height: 200px;background: red;}
    #box2{width: 200px;height: 200px;position:absolute;left:50px;top:0px}
  </style>
</head>
<body>
  <div id="box"></div>
  <div id="box2"></div>
  <form action="" id="form">
    <input type="text" id="txt" name="username">
    <input type="submit" id="submit">
    <input type="reset" id="reset">
  </form>
</body>
<script>

  var box = document.getElementById("box");

  box.onclick = function(){
    console.log("触发了点击事件");
  }
  box.ondblclick = function(){
    console.log("触发了双击事件");
  }
  box.onmousedown = function(){
    console.log("触发了按下事件");
  }
  box.onmouseup = function(){
    console.log("触发了抬起事件");
  }
  box.onmouseover = function(){
    console.log("触发了进入事件");
  }
  box.onmouseout = function(){
    console.log("触发了离开事件");
  }
  box.onmousemove = function(){
    console.log("触发了移动事件");
  }

  window.onkeydown = function(){
    console.log("按下了键盘")
  }
  window.onkeyup = function(){
    console.log("抬起了键盘")
  }

  var txt = document.getElementById("txt")
  var form = document.getElementById("form")

  txt.onfocus = function(){
    console.log("获取焦点")
  }
  txt.onblur = function(){
    console.log("失去焦点")
  }
  txt.oninput = function(){
    console.log("输入内容")
  }
  txt.onchange = function(){
    console.log("内容改变")
  }
  form.onreset = function(){
    console.log("重置了表单内容")
  }
  form.onsubmit = function(){
    console.log("提交了表单内容")
  }






  
</script>
</html>